<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>表结构与数据管理</title>
    <style>
        /* 全局样式重置与基础设置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background-color: #f8f9fa;
            color: #333;
            line-height: 1.6;
            padding: 20px 0;
        }

        /* 容器样式 */
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        }

        /* 标题样式 */
        h1 {
            color: #2c3e50;
            margin-bottom: 30px;
            font-weight: 600;
            padding-bottom: 15px;
            border-bottom: 2px solid #3498db;
        }

        h2 {
            color: #34495e;
            margin: 25px 0 15px;
            font-weight: 500;
            display: flex;
            align-items: center;
        }

        h2::before {
            content: '';
            display: inline-block;
            width: 4px;
            height: 20px;
            background-color: #3498db;
            margin-right: 10px;
            border-radius: 2px;
        }

        /* 表格样式 */
        .table-structure, .table-data {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
            margin-top: 20px;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
        }

        .table-structure:hover, .table-data:hover {
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        .table-structure th, .table-structure td,
        .table-data th, .table-data td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid #e9ecef;
        }

        .table-structure th, .table-data th {
            background-color: #f1f5f9;
            color: #2c3e50;
            font-weight: 500;
            position: sticky;
            top: 0;
            z-index: 2;
        }

        .table-data tbody tr {
            transition: background-color 0.2s ease;
        }

        .table-data tbody tr:hover {
            background-color: #f8fafc;
        }

        .table-data tbody tr:last-child td {
            border-bottom: none;
        }

        /* 加载状态样式 */
        .loading {
            color: #666;
            font-style: italic;
            padding: 30px;
            text-align: center;
            background-color: #f8fafc;
            border-radius: 8px;
            margin-top: 20px;
        }

        /* 按钮样式 */
        .btn {
            padding: 8px 16px;
            margin: 5px;
            cursor: pointer;
            border: none;
            border-radius: 6px;
            font-weight: 500;
            font-size: 14px;
            transition: all 0.2s ease;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .btn i {
            margin-right: 6px;
        }

        .btn-primary {
            background-color: #3498db;
            color: white;
        }

        .btn-primary:hover {
            background-color: #2980b9;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(52, 152, 219, 0.3);
        }

        .btn-danger {
            background-color: #e74c3c;
            color: white;
        }

        .btn-danger:hover {
            background-color: #c0392b;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(231, 76, 60, 0.3);
        }

        .btn-warning {
            background-color: #f39c12;
            color: white;
        }

        .btn-warning:hover {
            background-color: #d35400;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(243, 156, 18, 0.3);
        }

        .btn-info {
            background-color: #2ecc71;
            color: white;
        }

        .btn-info:hover {
            background-color: #27ae60;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(46, 204, 113, 0.3);
        }

        .button-group {
            margin: 25px 0;
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        /* 模态框样式 */
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(3px);
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
        }

        .modal.show {
            opacity: 1;
            visibility: visible;
        }

        .modal-content {
            background-color: #fff;
            margin: 8% auto;
            padding: 30px;
            border: none;
            width: 90%;
            max-width: 600px;
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
            transform: translateY(-20px);
            transition: transform 0.3s ease;
        }

        .modal.show .modal-content {
            transform: translateY(0);
        }

        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
            transition: color 0.2s ease;
        }

        .close:hover, .close:focus {
            color: #e74c3c;
            text-decoration: none;
        }

        /* 表单样式 */
        .form-group {
            margin-bottom: 20px;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: #2c3e50;
        }

        .form-group input, .form-group select {
            width: 100%;
            padding: 10px 14px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 14px;
            transition: all 0.2s ease;
        }

        .form-group input:focus, .form-group select:focus {
            outline: none;
            border-color: #3498db;
            box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
        }

        .form-control[readonly] {
            background-color: #f8fafc;
            cursor: not-allowed;
            color: #7f8c8d;
        }

        .button-group {
            margin-top: 25px;
            display: flex;
            justify-content: flex-end;
        }

        /* 表格数据行悬停效果 */
        tr[data-row-index] {
            transition: all 0.2s ease;
        }

        tr[data-row-index]:hover {
            background-color: #f0f7ff;
        }

        /* 响应式调整 */
        @media (max-width: 768px) {
            .container {
                padding: 15px;
            }

            .table-structure, .table-data {
                font-size: 14px;
            }

            .table-structure th, .table-structure td,
            .table-data th, .table-data td {
                padding: 8px 10px;
            }

            .btn {
                padding: 6px 12px;
                font-size: 13px;
                margin: 3px;
            }

            .modal-content {
                padding: 20px;
                margin: 20% auto;
            }
        }

        /* 动画效果 */
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        .table-data-container {
            animation: fadeIn 0.5s ease;
        }

        /* 操作列样式 */
        td:last-child {
            display: flex;
            gap: 5px;
        }

        /* 状态提示样式 */
        .status-message {
            padding: 15px;
            border-radius: 6px;
            margin: 15px 0;
            text-align: center;
            font-weight: 500;
        }

        .status-success {
            background-color: rgba(46, 204, 113, 0.1);
            color: #27ae60;
        }

        .status-error {
            background-color: rgba(231, 76, 60, 0.1);
            color: #e74c3c;
        }
    </style>
</head>
<body>
<div class="container">
    <h1>表结构与数据管理: <span th:text="${tableName}"></span></h1>

    <script th:inline="javascript">
        // 定义常量存储tableName信息
        const TABLE_NAME = '[[${tableName}]]';
        console.log("当前表名: " + TABLE_NAME);

        // 表结构数据
        const tableStructs = /*[[${tableStructs}]]*/ [];

        // 页面加载完成后自动获取表数据
        document.addEventListener('DOMContentLoaded', function() {
            fetchTableData();
            setupEventListeners();
        });

        // 发送请求获取表数据并展示
        function fetchTableData() {
            const tableDataContainer = document.getElementById('table-data-container');
            tableDataContainer.innerHTML = '<div class="loading">加载数据中...</div>';

            fetch('/message/getMessage/' + TABLE_NAME)
                .then(response => {
                    if (!response.ok) {
                        throw new Error('网络响应错误: ' + response.status);
                    }
                    return response.json();
                })
                .then(data => renderTableData(data))
                .catch(error => {
                    console.error('获取表数据失败:', error);
                    tableDataContainer.innerHTML = '<div class="loading" style="color: red;">加载数据失败: ' + error.message + '</div>';
                });
        }

        // 渲染表数据 - 适配List<List<String>>格式
        function renderTableData(data) {
            const tableDataContainer = document.getElementById('table-data-container');

            if (!data || data.length === 0) {
                tableDataContainer.innerHTML = '<div class="loading">表中没有数据</div>';
                return;
            }

            // 创建表头
            let tableHtml = `
                <h2>表数据</h2>
                <table class="table-data">
                    <thead>
                        <tr>
            `;

            // 使用表结构中的列名作为表头
            tableStructs.forEach(struct => {
                tableHtml += `<th>${struct.columnName}</th>`;
            })

            tableHtml += `<th>操作</th>`;
            tableHtml += `
                        </tr>
                    </thead>
                    <tbody>
            `;

            // 填充数据行
            data.forEach((row, index) => {
                tableHtml += `<tr data-row-index="${index}">`;
                row.forEach(value => {
                    tableHtml += `<td>${value || '-'}</td>`;
                });
                tableHtml += `
                    <td>
                        <button class="btn btn-info" onclick="prepareUpdateRow(${index})">更新</button>
                        <button class="btn btn-danger" onclick="deleteRow(${index})">删除</button>
                    </td>
                </tr>`;
            });

            tableHtml += `
                    </tbody>
                </table>
            `;

            tableDataContainer.innerHTML = tableHtml;
        }

        // 设置事件监听器
        function setupEventListeners() {
            // 添加列按钮
            document.getElementById('add-column-btn').addEventListener('click', function() {
                const modal = document.getElementById('add-column-modal');
                modal.style.display = 'block';
                setTimeout(() => modal.classList.add('show'), 10);
            });

            // 删除列按钮
            document.getElementById('delete-column-btn').addEventListener('click', function() {
                const modal = document.getElementById('delete-column-modal');
                modal.style.display = 'block';
                setTimeout(() => modal.classList.add('show'), 10);
                populateDeleteColumnSelect();
            });

            // 修改列名按钮
            document.getElementById('rename-column-btn').addEventListener('click', function() {
                const modal = document.getElementById('rename-column-modal');
                modal.style.display = 'block';
                setTimeout(() => modal.classList.add('show'), 10);
                populateRenameColumnSelect();
            });

            // 添加数据按钮
            document.getElementById('add-data-btn').addEventListener('click', function() {
                const modal = document.getElementById('add-data-modal');
                modal.style.display = 'block';
                setTimeout(() => modal.classList.add('show'), 10);
                populateAddDataForm();
            });

            // 删除所有数据按钮
            document.getElementById('delete-all-data-btn').addEventListener('click', function() {
                if (confirm('确定要删除表 ' + TABLE_NAME + ' 中的所有数据吗？此操作不可撤销！')) {
                    deleteAllData();
                }
            });

            // 关闭模态框
            document.querySelectorAll('.close').forEach(closeBtn => {
                closeBtn.addEventListener('click', function() {
                    const modal = this.closest('.modal');
                    modal.classList.remove('show');
                    setTimeout(() => modal.style.display = 'none', 300);
                });
            });

            // 点击模态框外部关闭
            window.addEventListener('click', function(event) {
                if (event.target.classList.contains('modal')) {
                    event.target.classList.remove('show');
                    setTimeout(() => event.target.style.display = 'none', 300);
                }
            });

            // 处理添加列表单提交
            document.getElementById('add-column-form').addEventListener('submit', function(e) {
                e.preventDefault();
                addColumn();
            });

            // 处理删除列表单提交
            document.getElementById('delete-column-form').addEventListener('submit', function(e) {
                e.preventDefault();
                deleteColumn();
            });

            // 处理修改列名单提交
            document.getElementById('rename-column-form').addEventListener('submit', function(e) {
                e.preventDefault();
                renameColumn();
            });

            // 处理添加数据表单提交
            document.getElementById('add-data-form').addEventListener('submit', function(e) {
                e.preventDefault();
                addData();
            });

            // 处理更新数据表单提交
            document.getElementById('update-data-form').addEventListener('submit', function(e) {
                e.preventDefault();
                updateData();
            });
        }

        // 填充删除列的下拉框
        function populateDeleteColumnSelect() {
            const select = document.getElementById('delete-column-select');
            select.innerHTML = '';

            tableStructs.forEach(struct => {
                const option = document.createElement('option');
                option.value = struct.columnName;
                option.textContent = struct.columnName;
                select.appendChild(option);
            });
        }

        // 填充修改列名的下拉框
        function populateRenameColumnSelect() {
            const select = document.getElementById('rename-column-select');
            select.innerHTML = '';

            tableStructs.forEach(struct => {
                const option = document.createElement('option');
                option.value = struct.columnName;
                option.textContent = struct.columnName;
                select.appendChild(option);
            });
        }

        // 准备更新行数据
        function prepareUpdateRow(rowIndex) {
            const row = document.querySelector(`tr[data-row-index="${rowIndex}"]`);
            if (!row) return;

            const cells = row.querySelectorAll('td');
            const form = document.getElementById('update-data-form');
            form.innerHTML = '';
            const firstElementColumnName = tableStructs[0].columnName; // 获取第一个元素的列名
            let firstElementValue = null;

            // 存储原始数据值
            const originalValues = {};

            // 为每列创建输入框
            tableStructs.forEach((struct, colIndex) => {
                const fieldGroup = document.createElement('div');
                fieldGroup.className = 'form-group';

                const cellValue = cells[colIndex].textContent.trim() === '-' ? '' : cells[colIndex].textContent;
                originalValues[struct.columnName] = cellValue;
                if (colIndex === 0) {
                    firstElementValue = cellValue; // 获取第一个元素的值
                }

                fieldGroup.innerHTML = `
            <label>${struct.columnName} (${struct.columnType})</label>
            <input type="text" name="${struct.columnName}" value="${cellValue}" class="form-control" ${struct.columnName.toLowerCase() === 'id' ? 'readonly' : ''}>
        `;

                form.appendChild(fieldGroup);
            });

            // 添加提交按钮
            const submitButton = document.createElement('button');
            submitButton.type = 'submit';
            submitButton.className = 'btn btn-primary';
            submitButton.textContent = '更新数据';
            form.appendChild(submitButton);

            // 显示模态框
            const modal = document.getElementById('update-data-modal');
            modal.style.display = 'block';
            setTimeout(() => modal.classList.add('show'), 10);
        }

        // 填充添加数据的表单
        function populateAddDataForm() {
            const form = document.getElementById('add-data-form');
            form.innerHTML = '';

            tableStructs.forEach(struct => {
                // 跳过主键列（通常是ID）
                if (struct.columnName.toLowerCase() === 'id') return;

                const fieldGroup = document.createElement('div');
                fieldGroup.className = 'form-group';
                fieldGroup.innerHTML = `
                    <label>${struct.columnName} (${struct.columnType})</label>
                    <input type="text" name="${struct.columnName}" class="form-control" required>
                `;

                form.appendChild(fieldGroup);
            });

            const submitButton = document.createElement('button');
            submitButton.type = 'submit';
            submitButton.className = 'btn btn-primary';
            submitButton.textContent = '添加数据';
            form.appendChild(submitButton);
        }

        // 添加列
        function addColumn() {
            const columnName = document.getElementById('column-name').value;
            const columnType = document.getElementById('column-type').value;
            const columnSize = document.getElementById('column-size').value;

            if (!columnName || !columnType) {
                alert('列名和数据类型不能为空');
                return;
            }

            const data = {
                columnName: columnName,
                columnType: columnType,
                columnSize: columnSize
            };

            fetch('/message/addColumn/' + TABLE_NAME, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(data)
            })
                .then(response => response.text())
                .then(result => {
                    if (result === "ok"){
                        alert('添加成功...');
                        const modal = document.getElementById('add-column-modal');
                        modal.classList.remove('show');
                        setTimeout(() => {
                            modal.style.display = 'none';
                            location.reload(); // 刷新页面
                        }, 300);
                    }
                    else {
                        alert("添加失败，请检查网络或重试...");
                    }

                })
                .catch(error => {
                    console.error('添加列出错:', error);
                    alert('添加列失败: ' + error.message);
                });
        }

        // 删除列
        function deleteColumn() {
            const columnName = document.getElementById('delete-column-select').value;

            if (!columnName) {
                alert('请选择要删除的列');
                return;
            }

            if (!confirm('确定要删除列 ' + columnName + ' 吗？此操作不可撤销！')) {
                return;
            }

            fetch('/message/deleteColumn/' + TABLE_NAME + '/' + columnName, {
                method: 'DELETE'
            })
                .then(response => response.text())
                .then(result => {
                    if (result === "ok"){
                        alert('删除成功...');
                        const modal = document.getElementById('delete-column-modal');
                        modal.classList.remove('show');
                        setTimeout(() => {
                            modal.style.display = 'none';
                            location.reload(); // 刷新页面
                        }, 300);
                    }
                    else {
                        alert("删除失败，请检查网络或重试...");
                    }
                })
                .catch(error => {
                    console.error('删除列出错:', error);
                    alert('删除列失败: ' + error.message);
                });
        }

        // 修改列名
        function renameColumn() {
            const oldColumnName = document.getElementById('rename-column-select').value;
            const newColumnName = document.getElementById('new-column-name').value;

            if (!oldColumnName || !newColumnName) {
                alert('请选择要修改的列并输入新列名');
                return;
            }

            if (oldColumnName === newColumnName) {
                alert('新列名不能与旧列名相同');
                return;
            }

            if (!confirm('确定要将列 ' + oldColumnName + ' 重命名为 ' + newColumnName + ' 吗？')) {
                return;
            }

            const data = {
                oldColumnName: oldColumnName,
                newColumnName: newColumnName
            };

            fetch('/message/renameColumn/' + TABLE_NAME, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(data)
            })
                .then(response => response.text())
                .then(result => {
                    if (result === "ok"){
                        alert('修改成功...');
                        const modal = document.getElementById('rename-column-modal');
                        modal.classList.remove('show');
                        setTimeout(() => {
                            modal.style.display = 'none';
                            location.reload(); // 刷新页面
                        }, 300);
                    }
                    else {
                        alert("修改失败，请检查网络或重试...");
                    }
                })
                .catch(error => {
                    console.error('修改列名出错:', error);
                    alert('修改列名失败: ' + error.message);
                });
        }

        // 添加数据
        function addData() {
            const form = document.getElementById('add-data-form');
            const formData = {};

            Array.from(form.elements).forEach(element => {
                if (element.name && element.value) {
                    formData[element.name] = element.value;
                }
            });

            fetch('/message/addData/' + TABLE_NAME, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(formData)
            })
                .then(response => response.text())
                .then(result => {
                    if (result === "ok"){
                        alert('添加成功...');
                        const modal = document.getElementById('add-data-modal');
                        modal.classList.remove('show');
                        setTimeout(() => {
                            modal.style.display = 'none';
                            fetchTableData(); // 刷新数据
                        }, 300);
                    }
                    else {
                        alert('添加失败...')
                    }
                })
                .catch(error => {
                    console.error('添加数据出错:', error);
                    alert('添加数据失败: ' + error.message);
                });
        }

        // 更新数据
        function updateData() {
            const form = document.getElementById('update-data-form');
            const formData = {};
            let firstElementColumnName = tableStructs[0].columnName; // 获取第一个元素的列名
            let firstElementValue = null;

            // 收集表单数据
            Array.from(form.elements).forEach(element => {
                if (element.name && (element.type !== 'submit')) {
                    formData[element.name] = element.value;
                    if (element.name === firstElementColumnName) {
                        firstElementValue = element.value; // 获取第一个元素的值
                    }
                }
            });

            // 添加第一个元素的值作为隐藏字段
            const hiddenInput = document.createElement('input');
            hiddenInput.type = 'hidden';
            hiddenInput.name = 'firstElementValue';
            hiddenInput.value = firstElementValue;
            form.appendChild(hiddenInput);

            fetch('/message/updateData/' + TABLE_NAME , {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(formData)
            })
                .then(response => response.text())
                .then(result => {
                    if (result === "ok"){
                        alert('更新成功...');
                        const modal = document.getElementById('update-data-modal');
                        modal.classList.remove('show');
                        setTimeout(() => {
                            modal.style.display = 'none';
                            fetchTableData(); // 刷新数据
                        }, 300);
                    }
                    else {
                        alert('更新失败...');
                    }

                })
                .catch(error => {
                    console.error('更新数据出错:', error);
                    alert('更新数据失败: ' + error.message);
                });
        }

        // 删除单行数据
        function deleteRow(rowIndex) {
            const row = document.querySelector(`tr[data-row-index="${rowIndex}"]`);
            if (!row) return;

            const cells = row.querySelectorAll('td');
            const firstElementColumnName = tableStructs[0].columnName;
            const firstElementColumnType = tableStructs[0].columnType; // 获取第一个元素
            const firstElementValue = cells[0].textContent.trim(); // 获取第一个元素的值

            if (!confirm('确定要删除此行数据吗？')) {
                return;
            }

            // 添加删除前的动画效果
            row.style.backgroundColor = '#fff5f5';
            row.style.transform = 'translateX(-5px)';
            row.style.transition = 'all 0.3s ease';

            fetch('/message/deleteRow/' + TABLE_NAME + '/' + firstElementColumnType + '/'  + firstElementColumnName + '/' + firstElementValue, {
                method: 'DELETE'
            })
                .then(response => response.text())
                .then(result => {
                    if (result === "ok"){
                        alert('删除成功...');
                        fetchTableData(); // 刷新数据
                    }
                    else {
                        alert("删除失败，请检查网络连接或重试...");
                        // 恢复行样式
                        row.style.backgroundColor = '';
                        row.style.transform = '';
                    }
                })
                .catch(error => {
                    console.error('删除数据出错:', error);
                    alert('删除数据失败: ' + error.message);
                    // 恢复行样式
                    row.style.backgroundColor = '';
                    row.style.transform = '';
                });
        }

        // 删除所有数据
        function deleteAllData() {
            if (!confirm('确定要删除表 ' + TABLE_NAME + ' 中的所有数据吗？此操作不可撤销！')) {
                return;
            }

            fetch('/message/deleteAllData/' + TABLE_NAME, {
                method: 'DELETE'
            })
                .then(response => response.text())
                .then(result => {
                    if (result === "ok"){
                        alert('删除成功...');
                        fetchTableData(); // 刷新数据
                    }
                    else {
                        alert("删除失败，请检查网络连接或重试...")
                    }
                })
                .catch(error => {
                    console.error('删除所有数据出错:', error);
                    alert('删除所有数据失败: ' + error.message);
                });
        }
    </script>

    <h2>表结构</h2>
    <table class="table-structure">
        <thead>
        <tr>
            <th>列名</th>
            <th>数据类型</th>
            <th>是否可为空</th>
            <th>默认值</th>
            <th>额外信息</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="struct : ${tableStructs}">
            <td th:text="${struct.columnName}"></td>
            <td th:text="${struct.columnType}"></td>
            <td th:text="${struct.isNullable} ? '是' : '否'"></td>
            <td>null</td>
            <td>无</td>
        </tr>
        </tbody>
    </table>

    <!-- 表结构操作按钮 -->
    <div class="button-group">
        <button id="add-column-btn" class="btn btn-primary">添加列</button>
        <button id="delete-column-btn" class="btn btn-danger">删除列</button>
        <button id="rename-column-btn" class="btn btn-warning">修改列名</button>
    </div>

    <!-- 表数据容器 -->
    <div id="table-data-container"></div>

    <!-- 表数据操作按钮 -->
    <div class="button-group">
        <button id="add-data-btn" class="btn btn-primary">添加数据</button>
        <button id="delete-all-data-btn" class="btn btn-danger">删除所有数据</button>
    </div>

    <!-- 添加列模态框 -->
    <div id="add-column-modal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <h2>添加列</h2>
            <form id="add-column-form">
                <div class="form-group">
                    <label>列名</label>
                    <input type="text" id="column-name" required>
                </div>
                <div class="form-group">
                    <label>数据类型</label>
                    <select id="column-type" required>
                        <option value="VARCHAR">VARCHAR</option>
                        <option value="INT">INT</option>
                        <option value="DATE">DATE</option>
                        <option value="DATETIME">DATETIME</option>
                        <option value="TEXT">TEXT</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>长度/精度</label>
                    <input type="text" id="column-size">
                </div>
                <button type="submit" class="btn btn-primary">添加</button>
            </form>
        </div>
    </div>

    <!-- 删除列模态框 -->
    <div id="delete-column-modal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <h2>删除列</h2>
            <form id="delete-column-form">
                <div class="form-group">
                    <label>选择要删除的列</label>
                    <select id="delete-column-select" required></select>
                </div>
                <button type="submit" class="btn btn-danger">删除</button>
            </form>
        </div>
    </div>

    <!-- 修改列名模态框 -->
    <div id="rename-column-modal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <h2>修改列名</h2>
            <form id="rename-column-form">
                <div class="form-group">
                    <label>选择要修改的列</label>
                    <select id="rename-column-select" required></select>
                </div>
                <div class="form-group">
                    <label>新列名</label>
                    <input type="text" id="new-column-name" required>
                </div>
                <button type="submit" class="btn btn-warning">修改</button>
            </form>
        </div>
    </div>

    <!-- 添加数据模态框 -->
    <div id="add-data-modal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <h2>添加数据</h2>
            <form id="add-data-form"></form>
        </div>
    </div>

    <!-- 更新数据模态框 -->
    <div id="update-data-modal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <h2>更新数据</h2>
            <form id="update-data-form"></form>
        </div>
    </div>
</div>
</body>
</html>